<template>
	<div class="shangpingpinlie" ref='shangpingpinlie'>
		<h2 class="titleSelf">{{thatYear}}年跨境进出口主要商品品类</h2>
		<h3 class="titBq">货值(万元)</h3>
		<div class="contentSelf" v-if="">
			<div class="btnTab">
				<span :class="tableInOut?'active':''" @click="tableInOutFn($event)">进口</span>
				<span :class="!tableInOut?'active':''" @click="tableInOutFn($event)">出口</span>
			</div>
			<div class="contentSelfIn" v-if="tableInOut">
				<div class="shangpinglist" v-for="item,index in inDatas" :key="index">
					<div class="lingxing">
						{{item.CLASS}}
					</div>
					<div class="liubianxing">
						{{commonFunction.formatNumberRgx((item.HUOZHI/10000).toFixed(0))}}
						<!-- {{commonFunction.formatNumberRgx((item.DANLIANG/1000).toFixed(0))}} -->
					</div>
				</div>
			</div>
			<div class="contentSelfOut" v-if="!tableInOut">

				<div class="shangpinglist" v-for="item,index in outDatas" :key="index">
					<div class="lingxing">
						{{item.CLASS}}
					</div>
					<div class="liubianxing">
						{{commonFunction.formatNumberRgx((item.HUOZHI/10000).toFixed(0))}}
						<!-- {{commonFunction.formatNumberRgx((item.DANLIANG/1000).toFixed(0))}} -->
					</div>
				</div>
			</div>


			<!-- <div ref="shangpingpinlieChart" class="shangpingpinlieChart"></div> -->
		</div>

	</div>


</template>

<script>
	export default {
		name: 'shangpingpinlie',
		components: {

		},
		data() {
			return {
				thatYear:new Date().getFullYear()-1,
				tableInOut: true,
				inDatas: [],
				outDatas: []
			}
		},
		mounted() {
			var that = this;
			that.getInOutData()
			setInterval(function() {
				that.tableInOut = !that.tableInOut;
				that.getInOutData()
				
			}, 30000)
		},
		methods: {
			tableInOutFn(e) {
				// let tabid = e.target.dataset.id;
				this.tableInOut = !this.tableInOut;
				// 	if (this.tableInOut) {
				// 		this.$nextTick(() => {
				// 			this.getInData()
				// 		})

				// 	} else {
				// 		this.$nextTick(() => {
				// 			this.getOutData()
				// 		})

				// 	}
			},

			getInOutData() {
				var that = this;
				var startData = that.commonFunction.getLastYearYestdy()[0]
				that.$myHttp.get("getGoodClassInfo2", {
						year: startData,
					})
					.then(function(data0) {
						if (data0.status == "200") {
							console.log(data0.data, 'x')
							that.inDatas = data0.data.hn_productclass.imp;
							that.outDatas = data0.data.hn_productclass.exp;
						} else {
							alert("数据请求错误")
						}

					})
					.catch(function(error) {
						alert(error)
					})
			}
		}
	}
</script>

<style scoped>
	.shangpingpinlie {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		position: relative;
	}

	.titleSelf {
		width: 62%;
	}

	.titBq {
		font-size: .14rem;
		color: #07EEE9;
		margin: 0.01rem 0;
	}

	.contentSelf {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		flex-wrap: wrap;
		padding: 0;
	}

	.btnTab {
		position: absolute;
		top: -.45rem;
		right: .5rem;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.contentSelfIn,
	.contentSelfOut {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		flex-wrap: wrap;
	}

	.btnTab>span {
		color: #fff;
		border: 1px solid #fff;
		border-radius: .05rem;
		padding: 0 .12rem;
		font-size: .14rem;
		cursor: pointer;
	}

	.btnTab>span:nth-of-type(2) {
		margin-left: .1rem;
	}

	.btnTab>span.active {
		color: #00FFFF;
		border: 1px solid #00FFFF;
	}

	.shangpingpinlieChart {
		width: 100%;
		height: 100%;
	}

	.shangpinglist {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: column;
		width: 25%;
		height: 50%;
	}

	.lingxing {
		width: 100%;
		height: 70%;
		background: url(../../../../static/img/lingxingImg.png) no-repeat center bottom;
		background-size: 70% 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: .12rem;
		text-align: center;
		color: #02e9eb;
		padding: 0 25%;
	}

	.liubianxing {
		width: 100%;
		height: 30%;
		background: url(../../../../static/img/liubianxingImg.png) no-repeat center top;
		background-size: 80% 90%;
		font-size: .14rem;
		/* font-weight: bolder; */
		color: #fff;
		margin-top: -2px;
		text-align: center;
		padding-top: 0.04rem;
	}

	/* 
 .lingxing 
 .liubianxing */
</style>
